<template>
  <div class="ld-flex">
    <el-input
      v-if="['text', 'textarea', 'password', 'number'].includes(inputType)"
      v-model="formData[ formItem.prop ]"
      :type="inputType"
      :placeholder="formItem.placeholder || '请输入'+formItem.label"
      :disabled="disabledProps.includes(formItem.prop) || formItem.disabled"
      :clearable="formItem.hasOwnProperty('clearable') ? formItem.clearable: true"
      :rows="formItem.rows"
      :autosize="{ minRows: 3, maxRows: 5}"
      :maxlength="formItem.maxlength "
      :readonly="formItem.readonly || false"
      :show-word-limit="formItem.limit"
      @input="inputChange( formItem )"
      @change="emitChange(formItem.change, formData[ formItem.prop ])"
    />
    <div>
      <diy-num
        v-if="['diyNum'].includes(inputType)"
        v-model="formData[ formItem.prop ]"
        v-bind="formItem"
        :placeholder="formItem.placeholder || '请输入'+formItem.label"
        :disabled="disabledProps.includes(formItem.prop) || formItem.disabled"
        :clearable="formItem.hasOwnProperty('clearable') ? formItem.clearable: true"
        v-on="formItem"
        @change="emitChange(formItem.change, formData[ formItem.prop ])"
      />
    </div>
    <el-tag v-if="formItem.tagText" :type="formItem.tagType || 'default'">
      {{ formItem.tagText || '' }}
    </el-tag>
    <span
      v-if="formItem.afterTip"
      class="after-tip"
    >{{ formItem.afterTip }}</span>
  </div>
</template>
<script>
import DiyNum from './num-input'
export default {
  components: {
    DiyNum
  },
  props: {
    formItem: {
      type: Object,
      default: () => ({})
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    disabledProps: {
      type: Array,
      default: () => ([])
    }
  },
  computed: {
    inputType () {
      const { inputType } = this.formItem
      return {
        text: 'text',
        textarea: 'textarea',
        password: 'password',
        number: 'number',
        diyNum: 'diyNum'
      }[ inputType ] || 'text'
    }
  },
  methods: {
    inputChange ({ prop, formatVal }) {
      formatVal && typeof formatVal === 'function' && (this.formData[prop] = formatVal(this.formData[prop]))
    },
    emitChange (event, value) {
      event && typeof event === 'function' && event(value)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-textarea__inner::placeholder, ::v-deep .el-textarea__inner, ::v-deep .el-input__count, ::v-deep .el-input__inner {
  font-family: AlibabaPuHuiTi-R;
}

</style>

